<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglib.inc"%>
<%@ include file="/WEB-INF/inc/script.inc"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="${base}">
<title>中金通 | 产品统计</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="js/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">

<!-- FooTable -->
<!-- <link href="css/plugins/footable/footable.core.css" rel="stylesheet"> -->
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/plugins/dataTables/dataTables.responsive.css"
	rel="stylesheet">
<!-- <link href="css/echartsHome.css"
	rel="stylesheet"> -->
<link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="css/plugins/dataTables/dataTables.tableTools.min.css"
	rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins/chosen/chosen.css" rel="stylesheet">
<link href="css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
<style>
        .blueimp-gallery {
        	width:1200px;
        	height:800px;
            margin: 0px;
        }
        .detail-content{
        	font-size:15px;
        }
        .col-md-3{
  			padding-bottom: 20px;
        }
        .detail-title{
        	font-size:15px;
        	font-weight:bold;
        }
        .hr-line-dash{
	  		color: #ffffff;
	  		background-color: #ffffff;
	  		height: 1px;
	  		margin: 20px 0;
  		}
		.form-control[readonly]{
			background-color: #fff;
			opacity: 1;
		}
		.ui-autocomplete {
			z-index: 11111;
		}
		.main {
		    height: 400px;
		    /* width: 1500px !important; */
		    overflow: hidden;
		    padding : 10px;
		    margin-bottom: 10px;
		    border: 1px solid #e3e3e3;
		    -webkit-border-radius: 4px;
		       -moz-border-radius: 4px;
		            border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		}
    </style>
</head>

<body>

	<div id="wrapper">

		<!-- 左侧菜单 -->
		<jsp:include page="/WEB-INF/jsp/common/main-menu.jsp"></jsp:include>

		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<!-- 头部工具栏区 -->
				<jsp:include page="/WEB-INF/jsp/common/main-header.jsp"></jsp:include>
			</div>
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>数据统计</h2>
					<ol class="breadcrumb">
						<li><a href="common/platform">Home</a></li>
						<li><a href="chart/employeeChart">产品统计</a></li>
						<li class="active"><strong>
						<c:if test="${state == 1}">产品销售速率图表</c:if>
						<c:if test="${state == 2}">产品销售报表</c:if>
						<c:if test="${state == 3}">产品募集进度</c:if></strong></li>
					</ol>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<input type="text" id="state" class="hidden" value="${state}"/>
			<div class="row" style="margin-top: 10px;">
				<div class="col-md-12">
					<div class="tabs-container">
						<ul class="nav nav-tabs">
							<li id="productStat" class="active"><a href="productStats/getlist/1"> 产品销售速率图表 </a></li>
							<li id="productTable"><a href="productStats/getlist/2"> 产品销售报表 </a></li>
							<li id="productProgress"><a href="productStats/getlist/3"> 产品募集进度 </a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active">
								<div class="panel-body">
									<div
										class="wrapper wrapper-content animated fadeInRight ecommerce">
											<c:if test="${state != 3}">
											<div class="ibox-content m-b-sm">
												<form id="queryForm" method="post">
													<div class="row">
														<div class="col-sm-2">
															<!-- <div class="form-group">
																<input type="text" id="productName" name="productName" class="form-control" placeholder="产品名称"/>
																<div id="productNoSearch" class="popup"></div>
																<input type="hidden" id="productId" class="form-control" name="productId"/> 
															</div> -->
															<div class="input-group">
																<c:if test="${state == 1}">
                												<select id="productStatList" data-placeholder="选择产品" class="chosen-select" multiple style="width:300px;" tabindex="4">
                												<c:if test="${list.size() != 0}">
                													<c:forEach var="i" begin="0" end="${list.size()-1}">
                													<c:if test="${list.get(i).getState() == true}">
													                <option value="${list.get(i).getProductId()}" selected="selected">${list.get(i).getName()}</option>
													                </c:if>
													                <c:if test="${list.get(i).getState() == false}">
													                <option value="${list.get(i).getProductId()}">${list.get(i).getName()}</option>
													                </c:if>
													                </c:forEach>
													             </c:if>
												                </select>
												                </c:if>
												                <c:if test="${state == 2}">
                												<select id="productList" data-placeholder="选择产品" class="chosen-select" multiple style="width:300px;" tabindex="4">
                												<c:if test="${list.size() != 0}">
                													<c:forEach var="i" begin="0" end="${list.size()-1}">
													                <option value="${list.get(i).getProductId()}">${list.get(i).getName()}</option>
													                </c:forEach>
													             </c:if>
												                </select>
												                </c:if>
               												</div>
														</div>
														</div>
														<br/>
														<div class="row">
														<div class="col-sm-2">
															<c:if test="${state == 1}">
															<div class="form-group">
																<button class="btn btn-primary" id="compareBtn" type="button">开始对比</button>
					                                        </div>
					                                        </c:if>
					                                        <c:if test="${state == 2}">
															<div class="form-group">
																<button class="btn btn-primary" id="queryBtn" type="button">查询</button>
																&nbsp;&nbsp;&nbsp;
																<button class="btn btn-primary" id="downloadBtn" type="button">报表下载</button>
					                                        </div>
					                                        </c:if>
					                                    </div>
													</div>
												</form>
											</div>
											</c:if>
										<div class="row">
											<c:if test="${state == 1}">
											<div id="chart" class="main"></div>
											</c:if>
											<c:if test="${state == 3}">
											<div id="chartProgress" class="main" style="height:<c:if test="${size >= 16}"><c:out value="${(size-15)*24 + 400}"/></c:if><c:if test="${size < 16}">400</c:if>px"></div>
											</c:if>
											<c:if test="${state == 2}">
											<div class="col-lg-12" id="productStatTable">
												<div class="ibox float-e-margins">
													<div class="ibox-content">
														<table id="productStatEditable"
															class="table table-striped table-bordered table-hover">
															<thead>
																<tr>
																	<th>产品</th>
																	<th>团队</th>
																	<th>成交订单数</th>
																	<th>销售额</th>
																</tr>
															</thead>
															<tbody>
															</tbody>
														</table>
													</div>
												</div>
											</div>
											</c:if>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部版权 -->
			<jsp:include page="/WEB-INF/jsp/common/main-footer.jsp"></jsp:include>
		</div>
	</div>



	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>

	<!-- Data Tables -->
	<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="js/plugins/dataTables/dataTables.responsive.js"></script>
	<script src="js/plugins/dataTables/dataTables.tableTools.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
	<script src="js/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<!-- jsTree --> 
	<script src="js/plugins/jsTree/jstree.min.js"></script>
	<script type="text/javascript" src="js/popup-layer.js"></script>
	<!-- Page-Level Scripts -->
	
	<!-- Chosen -->
    <script src="js/plugins/chosen/chosen.jquery.js"></script>
	
	<script src="js/jquery.tmpl.min.js"></script>
	<script src="js/stats/productStats/productChart-module.js?v=${jsVersion}"></script>
	
	
	<!-- eCharts -->
	<script src="js/echart/echarts-y.js"></script>
	<script src="js/echarts-all.js"></script>
	
	
	<script>
		$(document).ready(function() {
			productChartModule.init();
			var config = {
	                '.chosen-select'           : {},
	                '.chosen-select-deselect'  : {allow_single_deselect:true},
	                '.chosen-select-no-single' : {disable_search_threshold:10},
	                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
	                '.chosen-select-width'     : {width:"95%"}
	                }
	            for (var selector in config) {
	                $(selector).chosen(config[selector]);
	            }
			/* var pop = new PopupLayer({trigger:"#productName",popupBlk:"#productNoSearch"});
        	pop.init(pop); */
		});
	</script>
        

</body>

</html>
